<template>
  <div>
    <!-- 查找 -->
    <el-space>
      <el-input v-model="seekData.spuName" placeholder="请输入商品名称" />
      <el-input v-model="seekData.id" placeholder="请输入团购ID" />
      <el-select v-model="seekData.status" class="m-2" placeholder="请选择团购状态">
        <el-option
          v-for="item in selectState"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" :icon="EditPen" @click="addGroup">添加</el-button>
      <el-button type="primary" :icon="Search" @click="findGroup">查找</el-button>
    </el-space>
    <!-- 表格数据 -->
    <el-table :data="groupData" border style="width: 100%" v-loading="loading">
      <!-- 子数据 -->
      <el-table-column type="expand">
        <template #default="props">
          <div style="width: 95%;margin: auto;">
            <p>
              <strong style="color:#9AABC5">类目ID {{ props.row.categoryId }}</strong>
            </p>
            <p>
              <strong style="color:#9AABC5">商品sku属性 {{ props.row.city }}</strong>
            </p>
          </div>
          <el-table :data="props.row.groupShopSkuDTOList" border style="width: 95%;margin: auto;">
            <el-table-column prop="skuId" label="Skuid" align="center" />
            <el-table-column prop="title" label="规格标题" align="center" />
            <el-table-column prop="skuGroupShopPrice" label="团购价格(元)" align="center" />
            <el-table-column prop="stock" label="库存" align="center" />
            <el-table-column prop="originalPrice" label="原始价格(元)" align="center" />
            <el-table-column prop="price" label="售卖价格(元)" align="center" />
            <el-table-column prop="vipPrice" label="会员价格(元)" align="center" />
            <el-table-column prop="barCode" label="国际条码" align="center" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="团购ID" align="center" />
      <el-table-column prop="categoryId" label="商品ID" align="center" />
      <el-table-column prop="title" label="商品名称" align="center" width="250" />
      <el-table-column prop="img" label="商品主图" align="center">
        <template #default="scope">
          <el-image :src="scope.row.img" />
        </template>
      </el-table-column>
      <el-table-column prop="automaticRefund" label="未满策略" align="center">
        <template #default="scope">
          <el-tag
            :type="scope.row.automaticRefund==0?'warning':''"
          >{{scope.row.automaticRefund==1?'发货':'不发货'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="活动状态" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status==0?'':'success'">{{scope.row.status==0?'冻结':'进行'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtStart" label="开始时间" align="center">
        <template #default="scope">{{ new Date(scope.row.gmtStart).followTime() }}</template>
      </el-table-column>
      <el-table-column prop="gmtEnd" label="结束时间" align="center">
        <template #default="scope">{{ new Date(scope.row.gmtEnd).followTime() }}</template>
      </el-table-column>
      <el-table-column prop="buyerNum" label="当前人数" align="center" />
      <el-table-column prop="minNum" label="目标人数" align="center" />
      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <el-button type="primary" @click="handleCompile(scope.row)" v-if="scope.row.status==0">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)" v-if="scope.row.status==0">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pa-ging v-bind="pages" @changePage="changePage" @changeLimit="changeLimit" />
    <!-- 左侧弹框 -->
    <el-drawer
      ref="drawerRef"
      v-model="dialog"
      :title="title"
      :before-close="handleClose"
      direction="ltr"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <el-space wrap>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <strong>商品属性(spu)</strong>
              </div>
            </template>
            <el-form :model="form" label-width="150px" label-position="left">
              <el-form-item label="团购商品">
                <el-cascader
                  :options="options"
                  :props="props"
                  v-model="form.spuId"
                  @change="choiceData"
                />
              </el-form-item>
              <el-form-item label="团购时间">
                <el-date-picker
                  v-model="form.gmtStart"
                  type="datetime"
                  placeholder="开始时间"
                  format="YYYY/MM/DD hh:mm:ss"
                  value-format="x"
                />
                <span style="padding: 0 10px;">至</span>
                <el-date-picker
                  v-model="form.gmtEnd"
                  type="datetime"
                  placeholder="结束时间"
                  format="YYYY/MM/DD hh:mm:ss"
                  value-format="x"
                />
              </el-form-item>
              <el-form-item label="团购基础人数">
                <el-input-number
                  v-model="form.minNum"
                  class="mx-4"
                  :min="1"
                  controls-position="right"
                  :step="1"
                  step-strictly
                />
              </el-form-item>
              <el-form-item label="活动结束时人数没有达到基础人数采取：">
                <el-radio-group v-model="form.automaticRefund">
                  <el-radio-button :label="1">不退款,我要发货</el-radio-button>
                  <el-radio-button :label="0">自动退款,我不发货</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </el-card>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <strong>商品类型(sku)</strong>
                <el-popover v-model:visible="visible" placement="right" :width="160">
                  <el-form>
                    <el-form-item label="团购价格">
                      <el-input-number
                        :min="1"
                        class="inp"
                        controls-position="right"
                        v-model="ruleForm.skuGroupShopPrice"
                      />
                    </el-form-item>
                  </el-form>
                  <div style="text-align: right; margin: 0">
                    <el-button size="small" type="text" @click="visible = false">取消</el-button>
                    <el-button size="small" type="primary" @click="batchPrice">确定</el-button>
                  </div>
                  <template #reference>
                    <el-button type="primary" style="float: right;" plain @click="visible=true">批量定价</el-button>
                  </template>
                </el-popover>
              </div>
            </template>
            <el-table :data="groupShopSkuList">
              <el-table-column prop="id" label="SkuId" align="center" />
              <el-table-column prop="barCode" label="Sku条形码" align="center" />
              <el-table-column prop="title" label="类型名" align="center" />
              <el-table-column prop="stock" label="库存" align="center" />
              <el-table-column prop="price" label="现价/元" align="center" />
              <el-table-column prop="skuGroupShopPrice" label="团购价格/元" align="center" />
              <el-table-column prop="name" label="操作" align="center">
                <template #default="scope">
                  <el-button type="primary" @click="updatePrice(scope.row)">更新</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-space>
        <div class="demo-drawer__footer" align="right">
          <el-button @click="dialog = false">取消</el-button>
          <el-button type="primary" @click="confirmAdd" v-if="title=='创建团购商品'">确定</el-button>
          <el-button type="primary" @click="confirmCompile()" v-else>确定</el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 更新团购价格对话框 -->
    <el-dialog v-model="dialogVisible" title="更新团购价格" width="30%" :before-close="handleCloses">
      <el-form ref="formRef" :model="ruleForm" label-width="120px" class="demo-dynamic">
        <el-form-item label="团购价格" prop="skuGroupShopPrice">
          <el-input-number
            :min="1"
            class="inp"
            controls-position="right"
            v-model="ruleForm.skuGroupShopPrice"
          />
        </el-form-item>
        <el-form-item label="现价" prop="price">
          <span>{{ ruleForm.price }}</span>
        </el-form-item>
        <el-form-item label="sku类型名" prop="title">
          <span>{{ ruleForm.title }}</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmUpdate(ruleForm)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import { EditPen, Search } from "@element-plus/icons-vue";
import {post,get} from "@/utlis/http";
export default {
  components: {
    EditPen,
    Search,
  },
  setup() {
    return {
      EditPen,
      Search,
    };
  },
  data() {
    return {
      pages: {
        page: 1, //页
        limit: 10, //条
        total: 10, //总条数
      },
      selectState: [
        { label: "冻结", value: 0 },
        { label: "活动", value: 1 },
      ],
      seekData: {
        spuName: "", //团购商品的名称
        status: "", //团购商品的状态
        id: "", //团购商品的ID
      },
      groupData: [], //团购数据表
      dialog: false, //抽屉
      dialogVisible: false, //对话框
      loading: true, //加载
      form: {
        //抽屉数据
        spuId: "", //spuId
        gmtStart: "", //团购开始时间戳
        gmtEnd: "", //团购结束时间戳
        minNum: 1, //团购最低人数
        automaticRefund: 1, //团购人数未满是否自动退款
      },
      groupShopSkuList: [], //团购sku链表
      ruleForm: {
        //更新团购价格
        id: "",
        title: "", //类型名
        price: "", //现价
        skuGroupShopPrice: 0, //团购价
      },
      title: "创建团购商品",
      options: [], //商品选择
      visible: false,
      props: {
        value: "id", //指定选项的值为选项对象的某个属性值
        label: "label", //指定选项标签为选项对象的某个属性值
        children: "children", //指定选项的子选项为选项对象的某个属性值
        emitPath: false, //在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
      },
    };
  },
  computed: {
    //正则
    regular() {
      if (this.form.spuId == "") {
        ElMessage.warning("团购商品不能为空");
        return false;
      }
      if (this.form.gmtStart == "" || this.form.gmtEnd == "") {
        ElMessage.warning("团购开始时间或结束时间不能为空");
        return false;
      } else if (this.form.gmtEnd < this.form.gmtStart) {
        ElMessage.warning("团购开始结束不能大于开始时间");
        return false;
      }
      let bool = this.groupShopSkuList.find((item) => item.skuGroupShopPrice);
      if (!bool) {
        ElMessage.warning("请设置团购价格");
        return false;
      }
      return true;
    },
  },
  created() {
    this.initiaLize();
  },
  methods: {
    //初始化数据
    initiaLize() {
      let data = {
        _gp: "admin.groupshop",
        _mt: "list",
        ...this.seekData,
        page: this.pages.page,
        limit: this.pages.limit,
      };
      get(data).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.groupData = data.items;
          this.loading = false;
          this.pages.total = data.total;
        }
      });
    },
    //在选择团购商品数据的时候调用sku链表
    choiceData() {
      this.groupShopSkuLists();
    },
    // 团购sku链表
    groupShopSkuLists() {
      let data = {
        _gp: "admin.product",
        _mt: "detail",
        spuId: this.form.spuId,
      };
      post(data).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.groupShopSkuList = data.skuList;
        }
      });
    },
    //商品数据
    commodityData() {
      //商品
      let data = {
        _gp: "admin.product",
        _mt: "getSpuBigTree",
      };
      post(data).then((res) => {
        let { data, errno } = res.data;
        if (200 == errno) {
          this.options = data;
        }
      });
    },
    //创建
    addGroup() {
      this.dialog = true;
      this.form.automaticRefund = 0;
      this.commodityData();
      this.groupShopSkuList = [];
      this.form = {
        //抽屉数据
        spuId: "",
        gmtStart: "", //团购开始时间戳
        gmtEnd: "", //团购结束时间戳
        minNum: 1, //团购最低人数
        automaticRefund: 1, //团购人数未满是否自动退款
      };
      this.ruleForm = {
        id: "",
        title: "", //类型名
        price: "", //现价
        skuGroupShopPrice: 0, //团购价
      };
      this.commodityData();
    },
    //确定创建
    confirmAdd() {
      if (!this.regular) {
        return;
      }
      //传参只需要两个参数
      let groupShopSkuList = this.groupShopSkuList.map((item) => {
        return {
          skuId: item.id,
          skuGroupShopPrice: item.skuGroupShopPrice,
        };
      });
      let data = {
        _gp: "admin.groupshop",
        _mt: "create",
        ...this.form,
        groupShopSkuList: JSON.stringify(groupShopSkuList),
      };
      post(data).then((res) => {
        let { errno, errmsg } = res.data;
        if (200 == errno) {
          this.initiaLize();
          ElMessage.success("创建成功");
          this.loading = true;
          this.dialog = false;
        } else {
          ElMessage.warning(errmsg);
        }
      });
    },
    //编辑
    handleCompile(row) {
      this.title = "编辑团购商品";
      this.dialog = true;
      this.commodityData()
      let { id, spuId, gmtStart, gmtEnd, minNum, automaticRefund } = row;
      Object.assign(this.form, {
        id,
        spuId,
        gmtStart,
        gmtEnd,
        minNum,
        automaticRefund,
      });
      this.groupShopSkuList = row.groupShopSkuDTOList;
    },
    //确定编辑
    confirmCompile() {
      if (!this.regular) {
        return;
      }
      let groupShopSkuList = this.groupShopSkuList.map((item) => {
        return {
          skuId: item.id,
          skuGroupShopPrice: item.skuGroupShopPrice,
        };
      });
      let data = {
        _gp: "admin.groupshop",
        _mt: "edit",
        ...this.form,
        groupShopSkuList: JSON.stringify(groupShopSkuList),
      };
      post(data).then((res) => {
        console.log(res);
        let { errno, errmsg } = res.data;
        if (200 == errno) {
          this.initiaLize();
          this.loading = true;
          ElMessage.success("编辑成功");
          this.dialog = false;
        } else {
          ElMessage.warning(errmsg);
        }
      });
    },
    // 更改单个团购价
    updatePrice(row) {
      this.ruleForm.id = row.id;
      this.ruleForm.title = row.title;
      this.ruleForm.price = row.price;
      this.ruleForm.skuGroupShopPrice = row.skuGroupShopPrice;
      this.dialogVisible = true;
    },
    // 确定更改团购价
    confirmUpdate(row) {
      this.groupShopSkuList.forEach((item) => {
        if (row.id == item.id) {
          item.skuGroupShopPrice = row.skuGroupShopPrice;
        }
      });
      this.ruleForm.skuGroupShopPrice = 1;
      this.dialogVisible = false;
    },
    //批量更改团购价
    batchPrice() {
      this.groupShopSkuList.forEach((item) => {
        item.skuGroupShopPrice = this.ruleForm.skuGroupShopPrice;
      });
      this.ruleForm.skuGroupShopPrice = 1;
      this.visible = false;
    },
    //删除
    handleDelete(row) {
      ElMessageBox.confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            _gp: "admin.groupshop",
            _mt: "delete",
            id: row.id,
          };
          post(data).then((res) => {
            let { errno, errmsg } = res.data;
            if (200 == errno) {
              ElMessage.success("删除成功");
              this.initiaLize();
            } else {
              ElMessage.warning(errmsg);
            }
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除",
          });
        });
    },
    //查找
    findGroup() {
      this.initiaLize();
      this.loading = true;
    },
    //条
    changeLimit(val) {
      this.pages.limit = val;
      this.initiaLize();
    },
    //页
    changePage(val) {
      this.pages.page = val;
      this.initiaLize();
    },
    //关闭抽屉
    handleClose() {
      this.dialog = false;
      this.visible = false;
    },
    // 关闭对话框
    handleCloses() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.el-table {
  margin: 20px 0 40px 0;
  .el-image {
    width: 50px;
  }
}
/deep/.el-drawer {
  width: 805px !important;
  .demo-drawer__footer {
    width: 100%;
    height: 50px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 99;
    margin-top: 40px;
    margin-right: 20px;
  }
}
/deep/ .box-card {
  width: 750px;
}
.inp {
  width: 100px;
}
</style>